<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书馆座位预约系统 - 管理员后台</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/dashboard.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div class="admin-container">
        <!-- 左侧边栏 -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <h1 class="logo">
                    <i class="fas fa-book"></i>
                    <span>图书馆管理系统</span>
                </h1>
            </div>
            <nav class="sidebar-nav">
                <ul>
                    <li class="nav-item active">
                        <a href="index.html" class="nav-link">
                            <i class="fas fa-tachometer-alt"></i>
                            <span>系统概览</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="seat-management.html" class="nav-link">
                            <i class="fas fa-chair"></i>
                            <span>座位管理</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="booking-management.html" class="nav-link">
                            <i class="fas fa-calendar-alt"></i>
                            <span>预约管理</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="user-management.html" class="nav-link">
                            <i class="fas fa-users"></i>
                            <span>用户管理</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="data-analysis.html" class="nav-link">
                            <i class="fas fa-chart-bar"></i>
                            <span>数据分析</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="report-statistics.html" class="nav-link">
                            <i class="fas fa-file-alt"></i>
                            <span>报表统计</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="system-settings.html" class="nav-link">
                            <i class="fas fa-cog"></i>
                            <span>系统设置</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </aside>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 顶部导航栏 -->
            <header class="top-navbar">
                <div class="navbar-left">
                    <button class="menu-toggle" id="menuToggle">
                        <i class="fas fa-bars"></i>
                    </button>
                    <h2 class="page-title">系统概览</h2>
                </div>
                <div class="navbar-right">
                    <div class="search-box">
                        <input type="text" placeholder="搜索...">
                        <i class="fas fa-search"></i>
                    </div>
                    <div class="notification">
                        <i class="fas fa-bell"></i>
                        <span class="badge">3</span>
                    </div>
                    <div class="user-profile">
                        <img src="assets/avatar-admin.png" alt="管理员头像">
                        <span>管理员</span>
                    </div>
                </div>
            </header>

            <!-- 系统概览内容 -->
            <div class="dashboard-overview">
                <!-- 第一行：核心指标卡片 -->
                <div class="stats-row">
                    <!-- 总座位数 -->
                    <div class="stat-card">
                        <div class="stat-header">
                            <i class="fas fa-chair stat-icon"></i>
                            <h3>总座位数</h3>
                        </div>
                        <div class="stat-value">1,256</div>
                        <div class="stat-footer">
                            <span class="trend positive">
                                <i class="fas fa-arrow-up"></i> 8%
                            </span>
                            <span>较上月增加 24 个座位</span>
                        </div>
                    </div>

                    <!-- 今日预约数 -->
                    <div class="stat-card">
                        <div class="stat-header">
                            <i class="fas fa-calendar-alt stat-icon"></i>
                            <h3>今日预约数</h3>
                        </div>
                        <div class="stat-value">846</div>
                        <div class="stat-footer">
                            <span class="trend positive">
                                <i class="fas fa-arrow-up"></i> 15%
                            </span>
                            <span>周同比：15%</span>
                        </div>
                    </div>

                    <!-- 当前使用率 -->
                    <div class="stat-card">
                        <div class="stat-header">
                            <i class="fas fa-chart-pie stat-icon"></i>
                            <h3>当前使用率</h3>
                        </div>
                        <div class="stat-value">78%</div>
                        <div class="stat-footer">
                            <span class="trend positive">
                                <i class="fas fa-arrow-up"></i> 12%
                            </span>
                            <span>较昨日：+5%</span>
                        </div>
                    </div>

                    <!-- 异常预约 -->
                    <div class="stat-card">
                        <div class="stat-header">
                            <i class="fas fa-exclamation-triangle stat-icon"></i>
                            <h3>异常预约</h3>
                        </div>
                        <div class="stat-value">23</div>
                        <div class="stat-footer">
                            <span class="trend negative">
                                <i class="fas fa-arrow-down"></i> 8%
                            </span>
                            <span>需处理：5 个</span>
                        </div>
                    </div>
                </div>

                <!-- 第二行：图表区域 -->
                <div class="charts-row">
                    <!-- 座位使用趋势图 -->
                    <div class="chart-card" style="grid-column: span 2;">
                        <div class="card-header">
                            <h3>座位使用趋势</h3>
                            <div class="chart-controls">
                                <button class="control-btn active">周</button>
                                <button class="control-btn">月</button>
                                <button class="control-btn">年</button>
                            </div>
                        </div>
                        <div class="chart-container">
                            <canvas id="usageTrendChart"></canvas>
                        </div>
                    </div>

                    <!-- 区域分布饼图 -->
                    <div class="chart-card">
                        <div class="card-header">
                            <h3>区域分布占比</h3>
                            <div class="chart-controls">
                                <button class="control-btn active">按座位数</button>
                                <button class="control-btn">按使用率</button>
                            </div>
                        </div>
                        <div class="chart-container">
                            <canvas id="areaDistributionChart"></canvas>
                        </div>
                    </div>
                </div>

                <!-- 第三行：数据表格 -->
                <div class="tables-row">
                    <!-- 热门座位排行 -->
                    <div class="table-card">
                        <div class="card-header">
                            <h3>热门座位排行</h3>
                            <button class="refresh-btn">
                                <i class="fas fa-sync-alt"></i>
                            </button>
                        </div>
                        <div class="table-container">
                            <table class="data-table">
                                <thead>
                                    <tr>
                                        <th>排名</th>
                                        <th>座位号</th>
                                        <th>区域</th>
                                        <th>楼层</th>
                                        <th>月预约次数</th>
                                        <th>使用率</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>A101</td>
                                        <td>A区</td>
                                        <td>1楼</td>
                                        <td>156</td>
                                        <td>92%</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>B203</td>
                                        <td>B区</td>
                                        <td>2楼</td>
                                        <td>142</td>
                                        <td>88%</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>C305</td>
                                        <td>C区</td>
                                        <td>3楼</td>
                                        <td>138</td>
                                        <td>86%</td>
                                    </tr>
                                    <tr>
                                        <td>4</td>
                                        <td>A105</td>
                                        <td>A区</td>
                                        <td>1楼</td>
                                        <td>125</td>
                                        <td>82%</td>
                                    </tr>
                                    <tr>
                                        <td>5</td>
                                        <td>D402</td>
                                        <td>D区</td>
                                        <td>4楼</td>
                                        <td>118</td>
                                        <td>80%</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 实时预约监控 -->
                    <div class="table-card">
                        <div class="card-header">
                            <h3>实时预约监控</h3>
                            <div class="time-filter">
                                <span>过去 30 分钟</span>
                                <i class="fas fa-chevron-down"></i>
                            </div>
                        </div>
                        <div class="table-container">
                            <table class="data-table">
                                <thead>
                                    <tr>
                                        <th>预约时间</th>
                                        <th>用户</th>
                                        <th>座位号</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>14:32:15</td>
                                        <td>张三</td>
                                        <td>A101</td>
                                        <td><span class="status active">已签到</span></td>
                                        <td>
                                            <button class="action-btn view">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>14:28:07</td>
                                        <td>李四</td>
                                        <td>B203</td>
                                        <td><span class="status pending">待签到</span></td>
                                        <td>
                                            <button class="action-btn view">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            <button class="action-btn cancel">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>14:25:41</td>
                                        <td>王五</td>
                                        <td>C305</td>
                                        <td><span class="status active">已签到</span></td>
                                        <td>
                                            <button class="action-btn view">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>14:20:33</td>
                                        <td>赵六</td>
                                        <td>A105</td>
                                        <td><span class="status expired">已过期</span></td>
                                        <td>
                                            <button class="action-btn view">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 系统状态 -->
                    <div class="table-card">
                        <div class="card-header">
                            <h3>系统状态</h3>
                            <span class="system-status">
                                <i class="fas fa-circle text-success"></i>
                                正常运行
                            </span>
                        </div>
                        <div class="system-status-panel">
                            <div class="status-item">
                                <div class="status-label">服务器状态</div>
                                <div class="status-value">
                                    <i class="fas fa-check-circle text-success"></i>
                                    正常
                                </div>
                            </div>
                            <div class="status-item">
                                <div class="status-label">数据库连接</div>
                                <div class="status-value">
                                    <i class="fas fa-check-circle text-success"></i>
                                    正常
                                </div>
                            </div>
                            <div class="status-item">
                                <div class="status-label">API服务</div>
                                <div class="status-value">
                                    <i class="fas fa-check-circle text-success"></i>
                                    正常
                                </div>
                            </div>
                            <div class="status-item">
                                <div class="status-label">在线用户</div>
                                <div class="status-value">489</div>
                            </div>
                            <div class="status-item">
                                <div class="status-label">CPU使用率</div>
                                <div class="status-value">23%</div>
                            </div>
                            <div class="status-item">
                                <div class="status-label">内存占用</div>
                                <div class="status-value">45%</div>
                            </div>
                            <div class="status-item">
                                <div class="status-label">磁盘空间</div>
                                <div class="status-value">78%</div>
                            </div>
                            <div class="status-item">
                                <div class="status-label">运行时间</div>
                                <div class="status-value">30天2小时</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script src="js/main.js"></script>
    <script src="js/dashboard.js"></script>
</body>
</html>